<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src='./vue.js'></script>
    <script>
window.onload=function(){
    Vue.component("my-footer",{
        //子组件
        data(){
            return {
                substr:"my-footer"
            }
        },
        methods:{
            send(){
                this.$emit("accept",this.substr,"send1");
            }
        },
        props:["msg","str",'num'],//子组件希望从父组件中接受的属性
        template:`
            <div>
                <p @click='send'>click-send</p>
               
            </div>
        `
    });

    var header={//父组件
        data(){
            return {
                num:0,
                substr:''
            }
        },
        methods:{
            handler(){
                this.num++;
            },
            accept(data,data1){
                this.substr=data;
                console.log(data,data1);
            }
        },
        template:`
        <div>
            
            <my-footer v-on:accept='accept' msg='hello-父组件给子组件的内容' str='my-header' :num='num'></my-footer>
            <button @click='handler'>click</button>
        </div>`
    }
    new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            'my-header':header
        }
    });
}
    </script>
</head>
<body>
   <div id="app">
       <my-header></my-header>
       <!-- <my-footer></my-footer> -->
   </div> 
</body>
</html>